<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
</head>
<link rel="stylesheet" href="/static/admin/css/layuimini.css">
<style>
    *{
        box-sizing:border-box;
    }
    div{
        display: block;
    }
    body{
        font-family:"Microsoft Yahei",'新宋体';
        font-size:14px;
        line-height: 1.42857143;
        color:#333;
    }
    h1{
        font-size: 18px;
        color: #333333;
        font-weight: bold;
    }
    .container{
        background:#ffffff;
        margin:50px auto;
        padding: 20px 0;
        width:1024px;
    }
    .header-title{
        border-bottom:1px solid #dedede;
        margin-bottom: 10px;
    }
    .text-center{
        text-align: center;
    }
    .progress-box{
        padding: 10px;
    }
    .progress{
        height: 30px;
        margin-bottom: 20px;
        overflow: hidden;
        background-color: #f5f5f5;
        border-radius: 4px;
    }
    .progress-bar{
        line-height:30px;
        font-size: 14px;
        float: left;
        height: 100%;
        color:#fff;
        text-align: center;
        width: 25%;
    }
    .content{
        padding: 0 20px;
    }
    .content-table{
        width: 100%;
        max-width:100%;
        margin-bottom: 20px;
        background-color: transparent;
        border-spacing: 0;
        border-collapse: collapse;
        display: table;
        border-color: grey;
    }
    nav{
        padding-top: 8px;
        padding-bottom: 8px;
        color: #777777;
        text-align: center;
    }
    thead{
        display: table-header-group;
        vertical-align: middle;
        border-color: inherit;
    }
    tbody{
        display: table-row-group;
        vertical-align: middle;
        border-color: inherit;
    }
    tr{
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }
    th{
        display: table-cell;
        font-weight: bold;
        vertical-align:bottom;
        border-bottom: 2px solid #dddddd;
        text-align:left;
    }
    td{
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top:1px solid #dddddd;
        display:table-cell;
        width: 50%;
    }
    .footer-center{
        text-align: center;
    }
    input{
        font-family:inherit;
        margin:0;
        -webkit-writing-mode:horizontal-tb !important;
        text-rendering:auto;
        letter-spacing: normal;
        word-spacing: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        text-align: start;
        -webkit-appearance: textfield;
        -webkit-rtl-ordering: logical;
        cursor: text;

    }
    .zz-input{
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size:14px;
        line-height:1.42857143;
        color:#555555;
        background-color:#ffffff;
        background-image:none;
        border:1px solid #cccccc;
        border-radius:4px;
        box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
        transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }
    .zz-btn{
        display:inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height:1.42857143;
        text-align:center;
        white-space:nowrap;
        vertical-align:middle;
        color:#333333;
        touch-action:manipulation;
        cursor: pointer;
    }
</style>
<body style="background: rgb(230, 234, 234);">
<div class="container">
    <div class="main">
        <div class="header-title text-center">
            <h1>{$title}</h1>
        </div>
        <div class="progress-box">
            <div class="progress">
                <div class="progress-bar progress-check" style="background-color: #00b7ee;"><span>环境检查</span></div>
                <div class="progress-bar progress-param" style="background-color: #5cb85c;"><span>参数配置</span></div>
                <div class="progress-bar progress-install" style="background-color: #337ab7;"><span>数据库安装</span></div>
                <div class="progress-bar progress-complete" style="background-color: #5bc0de;"><span>安装完成</span></div>
            </div>
        </div>
        <div class="content">
            <nav>
                <h1>数据库配置</h1>
            </nav>

            <table class="content-table">
                <tbody>
                    <tr>
                        <td><input type="text" name="host" id="host" autocomplete="off" class="zz-input" placeholder="127.0.0.1" value="127.0.0.1"></td>
                        <td><span>数据库地址</span></td>
                    </tr>
                    <tr>
                        <td><input type="text" name="port" id="port" autocomplete="off" class="zz-input" placeholder="3306" value="3306"></td>
                        <td><span>数据库端口</span></td>
                    </tr>
                    <tr>
                        <td><input type="text" name="database" id="database" autocomplete="off" class="zz-input" placeholder="zz" value="zz"></td>
                        <td><span>数据库名</span></td>
                    </tr>
                    <tr>
                        <td><input type="text" name="username" id="username" autocomplete="off" class="zz-input" placeholder="root" value="root"></td>
                        <td><span>数据库账号</span></td>
                    </tr>
                    <tr>
                        <td><input type="text" name="password" id="password" autocomplete="off" class="zz-input" placeholder="root" value="root"></td>
                        <td><span>数据库密码</span></td>
                    </tr>
                    <tr>
                        <td><input type="text" name="prefix" id="prefix" autocomplete="off" class="zz-input" placeholder="zz_" value="zz_"></td>
                        <td><span>数据库表前缀</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="footer">
            <div class="footer-center">
                <button type="button" id="last" class="zz-btn">上一步</button>
                <button type="button" id="step" class="zz-btn">下一步</button>
            </div>

        </div>
    </div>
</div>
</body>
<script src="/static/admin/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="/static/admin/lib/layui-v2.6.3/layui.js"></script>

<script>
    var layer;
    layui.use(["layui"],function(){
        layer = layui.layer;
    });

    // 上一步
    $("#last").click(function(){
        window.location.href = '/index/system';
    });

    // 下一步
    $("#step").click(function(){
        let host = document.getElementById("host").value;
        let port = document.getElementById("port").value;
        let database   = document.getElementById("database").value;
        let username   = document.getElementById("username").value;
        let password     = document.getElementById("password").value;
        let prefix    = document.getElementById("prefix").value;

        if(host == ''){
            layer.msg("数据库地址不能为空",{icon:2});
        }
        if(port == ''){
            layer.msg("数据库端口不能为空",{icon:2});
        }
        if(database == ''){
            layer.msg("数据库名不能为空",{icon:2});
        }
        if(username == ''){
            layer.msg("数据库账号不能为空",{icon:2});
        }
        if(prefix == ''){
            layer.msg("数据库表前缀不能为空",{icon:2});
        }


        $.ajax({
            url : '/index/db',
            type: 'POST',
            data:{host:host,port:port,database:database,username:username,password:password,prefix:prefix},
            beforeSend:function(){
                layer.msg('正在创建数据库,请稍后',{icon:16,shade:0.8});
            },
            success:function(res){
                if(res.code == 1){
                    layer.msg(res.msg,{icon:1},function(){
                        window.location.href = '/index/system';
                    })
                }else{
                    layer.msg(res.msg,{icon:2});
                }
            }

        });

        return false;

    });


</script>
</html>